<template>
  <div class="container">
    <div class="export-header">
      <el-button  icon="el-icon-edit" type="primary" size='medium' @click="addBtn">添加</el-button>
     <el-button  icon="el-icon-edit" type="primary" size='medium' @click="addBtn('more')">批量添加</el-button>
     <el-button  icon="el-icon-delete" type="primary" size='medium' @click="deleteItem">批量删除</el-button>
       <el-button icon="el-icon-download" type="primary" size='medium' @click="exportClick">导出</el-button>
    </div>
    <div class="input_modal">
      <div class="input-item">
        <span>所属集团：</span>
        <el-input v-model="trueName" placeholder="请输入内容" class="proName" @keyup.enter.native="search"></el-input>
      </div>
      <div class="input-item">
        <span>有效期：</span>
        <el-date-picker
            v-model="dateArr"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
        <el-button icon="el-icon-search" type="primary" size="medium" @click="getList">查询</el-button>
      </div>
    </div>
    <div class="table_con">
      <el-table :row-key="getRowKeys" v-loading="loading" :data="tableData" @selection-change="handleSelectionChange" :border='true'>
         <el-table-column
          fixed="left"
          type="selection"
          min-width='100'
          :reserve-selection="true"
          align="center"
        ></el-table-column> 
        <el-table-column :formatter="formatter" prop="userName" label="账号"></el-table-column>
        <el-table-column :formatter="formatter" prop="psw" label="密码"></el-table-column>
        <el-table-column :formatter="formatter" prop="price" label="卡券金额"></el-table-column>
        <el-table-column :formatter="formatter" prop="validTime" label="有效期">
           <template slot-scope="scope">
             {{scope.row.validTime?scope.row.validTime.split(' ')[0]:'--'}}
           </template>
        </el-table-column>
        <el-table-column :formatter="formatter" prop="trueName" label="所属集团"></el-table-column>
        <el-table-column prop="" label="操作" width='120'>
          <template slot-scope="scope">
            <el-button class="link" type="primary" size="mini">
              <router-link :to="{ path: 'userDetail',query: {id: scope.row.userId, pageIndex:pageIndex,type:'design'}}" style="color: #fff;">查看</router-link>
            </el-button>
             <el-button icon="el-icon-delete" type="danger" size="mini" @click="deleteRole(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageIndex" :page-size="pageSize" :page-sizes='[10,20,30,40]' layout="total, sizes, prev, pager, next, jumper" :total="pageCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
let CONSTANT = require("../../constant/constant.js");
let common = require("../../common.js");
export default {
  data() {
    return {
      tableData: [],
      pageCount: null,
      pageIndex: 1,
      pageSize: 10,
      loading: true,
      trueName: null,
      mobile: null,
      nickname:null,
      ids:[],
      selectVal:[],
      dateArr:[]
    };
  },
  mounted() {
    this.pageIndex = this.$router.currentRoute.query.pageIndex
      ? this.$router.currentRoute.query.pageIndex
      : 1;
    this.getList();
  },
  methods: {
    getRowKeys(row) {
      return row.userId;
    },
    deleteItem(){
      if(!this.selectVal.length) return
        let arr = []
        this.selectVal.map(item=>{
          arr.push({
            userId:item.userId
          })
        })
        this.$confirm('确定删除?', '提示', {           
            confirmButtonText: '确定',           
            cancelButtonText: '取消',           
            type: 'warning'         
        }).then(() => {           
            let  url = CONSTANT.URL.LIST.deleteEsShopUserCoreByIds;
            // let
            common.requestAjax(url,JSON.stringify(arr),null,(res)=>{
                if(res.status == 200){
                    this.$message({
                        type:'success',
                        message:'删除成功!'
                    });
                    this.getList();
                }
                else{
                    this.$message({
                        type:'warning',
                        message:res.msg
                    })
                }
            })      
        }).catch(() => {           
            this.$message({             
                type: 'info',             
                message: '已取消删除'           
            });                   
        });   
    },
    handleSelectionChange(val){
      this.ids = []
      this.selectVal = []
      this.selectVal = val
      this.selectVal.map(item=>{
        this.ids.push(item.userId)
      })
    },
    addBtn(state){
      this.$router.push('userDesignAdd?type='+state+'&pageIndex='+this.pageIndex)
    },
    deleteRole:function(obj) {
        
        this.$confirm('确定删除?', '提示', {           
            confirmButtonText: '确定',           
            cancelButtonText: '取消',           
            type: 'warning'         
        }).then(() => {           
            let  url = CONSTANT.URL.LIST.deleteEsShopUserCoreByIds;
            // let
            common.requestAjax(url,JSON.stringify([{
              userId:obj.userId
            }]),null,(res)=>{
                if(res.status == 200){
                    this.$message({
                        type:'success',
                        message:'删除成功!'
                    });
                    this.getList();
                }
                else{
                    this.$message({
                        type:'warning',
                        message:res.msg
                    })
                }
            })      
        }).catch(() => {           
            this.$message({             
                type: 'info',             
                message: '已取消删除'           
            });                   
        });    
    },
    dayChange(e){
      console.log(e,'aaaaaaa')
    },
    exportClick(){
      this.dateArr = this.dateArr||[]
      let beginDate,endDate
      if(this.dateArr.length){
        beginDate = this.dateArr[0]
        endDate = this.dateArr[1]
      }
      let sessionId = sessionStorage.getItem('sessionId');
      let url = `${CONSTANT.URL.LIST.userShopExport}?sessionId=${sessionId}`;
       var data = {
        ids:this.ids,
        type:'special',
        isAll:this.ids.length?'n':'y',
        trueName:this.trueName,
        beginDate: beginDate,
        endDate: endDate
       }
       common.post1(url, JSON.stringify(data), res => {
         var blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
          console.log(blob,'blob')
          blob = URL.createObjectURL(blob)
          var fileName = "定制用户.xlsx"
          let link = document.createElement('a')
          link.href = blob
          link.download = fileName
          link.click()
          link.remove()
      });
    },
    formatter(row, column, cellValue) {
      return cellValue ? cellValue : "- -";
    },
    getList: function() {
      this.dateArr = this.dateArr||[]
      let beginDate,endDate
      if(this.dateArr.length){
        beginDate = this.dateArr[0]
        endDate = this.dateArr[1]
      }
      let url = CONSTANT.URL.LIST.findEsShopUserCoreByPage;
      let data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        beginDate: beginDate,
        trueName: this.trueName,
        endDate: endDate,
        type:'special'
      };
      this.loading = true;
      common.requestAjax(url, JSON.stringify(data), null, res => {
        this.loading = false;
        let data = res.data;
        this.tableData = data.bussData;
        this.pageCount = data.count;
      });
    },
    search: function(e) {
      if (e.keyCode == 13) {
        this.pageIndex = 1;
        this.getList();
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getList();
    }
  }
};
</script>
